<template>
  <div class="app-container">

    <!--    <h2 style="text-align: center;">发布新课程</h2>-->

    <el-steps :active="1" finish-status="success" process-status="finish" simple align-center
              style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="提交审核"/>
    </el-steps>

    <el-form label-width="120px">

      <el-button type="text" @click="openChapterDialog()">添加章节</el-button>

      <!-- 章节 -->
      <el-collapse>
        <el-collapse-item
          v-for="chapter in chapterNestedList"
          :key="chapter.id"
          :name="chapter.id"
          :disabled="chapter.children.length===0"
        >
          <template slot="title">
            {{chapter.title}}
            <span class="chapterActs">
                <el-button type="text" @click.stop="dialogVideoFormVisible=true,chapterId=chapter.id,helpResetVideo()">添加课时</el-button>
                <el-button type="text" @click.stop="openChapterDialog(chapter.id)">编辑</el-button>
                <el-button type="text" @click.stop="removeChapter(chapter.id)">删除</el-button>
                <i>{{chapter.children.length}}个小节</i>
            </span>
          </template>
          <ul class="chapterList videoList">
            <li
              v-for="video in chapter.children"
              :key="video.id">
              <p>{{ video.title }}
                <span class="videoActs">
                        <el-button type="text" @click="editVideo(video.id)">编辑</el-button>
                        <el-button type="text" @click="removeVideo(video.id)">删除</el-button>
                    </span>
              </p>
            </li>
          </ul>

        </el-collapse-item>

      </el-collapse>

      <!-- 添加和修改章节表单 -->
      <el-dialog :visible.sync="dialogChapterFormVisible" :title="chapterTitle">
        <el-form :model="chapter" label-width="120px">
          <el-form-item label="章节标题">
            <el-input v-model="chapter.title"/>
          </el-form-item>
          <el-form-item label="章节排序">
            <el-input-number v-model="chapter.sort" :min="0" controls-position="right"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogChapterFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 添加和修改课时表单 -->
      <el-dialog :visible.sync="dialogVideoFormVisible" :title="videoTitle">
        <el-form :model="video" label-width="120px">
          <el-form-item label="课时标题">
            <el-input v-model="video.title"/>
          </el-form-item>
          <el-form-item label="课时排序">
            <el-input-number v-model="video.sort" :min="0" controls-position="right"/>
          </el-form-item>
          <el-form-item label="是否免费">
            <el-radio-group v-model="video.isFree">
              <el-radio :label=true>免费</el-radio>
              <el-radio :label=false>默认</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="上传视频">
            <!--
            :on-remove 删除方法
            :before-remove 删除之前方法
            -->
            <el-upload
              :on-success="handleVodUploadSuccess"
              :on-remove="handleVodRemove"
              :before-remove="beforeVodRemove"
              :on-exceed="handleUploadExceed"
              :file-list="fileList"
              :action="BASE_API+'eduvod/video/uploadAliyunVideo'"
              :limit="1"
              class="upload-demo">
              <el-button size="small" type="primary">上传视频</el-button>
              <el-tooltip placement="right-end" style="margin-left: 25px">
                <div slot="content">最大支持1G，<br>
                  支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
                  GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br>
                  MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br>
                  SWF、TS、VOB、WMV、WEBM 等视频格式上传
                </div>
                <i class="el-icon-question"/>
              </el-tooltip>
            </el-upload>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVideoFormVisible = false">取 消</el-button>
          <el-button :disabled="saveVideoBtnDisabled" type="primary" @click="saveOrUpdateVideo">确 定</el-button>
        </div>
      </el-dialog>

      <div style="margin: 20px 0">
        <el-button @click="previous">上一步</el-button>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="next">下一步</el-button>
      </div>

    </el-form>
  </div>
</template>

<script>
  import chapter from '@/api/edu/chapter'
  import video from '@/api/edu/video'
  import vod from '@/api/edu/vod'

  export default {
    data() {
      return {
        //==========章节初始值===========
        courseId: ''// 所属课程
        , chapterNestedList: [] // 章节嵌套课时列表
        , saveBtnDisabled: false // 保存按钮是否禁用
        , dialogChapterFormVisible: false //章节弹框
        , chapterTitle: '添加章节'
        , chapter: {
          title: ''
          , sort: 0
        }
        //==========小节初始值===========
        , saveVideoBtnDisabled: false // 课时按钮是否禁用
        , dialogVideoFormVisible: false
        , chapterId: ''// 课时所在的章节id
        , videoTitle: '添加课时'
        , video: {
          title: ''
          , sort: 0
          , isFree: 0
          , videoOriginalName:''
        }
        //==========视频初始值===========
        , fileList: []//上传文件列表
        , BASE_API: process.env.BASE_API // 接口API地址
      }
    },
    created() {
      console.log('chapter created')
      this.init()
    },
    methods: {
      //=====================视频操作=====================
      //1. 上传视频成功回调
      handleVodUploadSuccess(response, file, fileList) {
        this.video.videoSourceId = response.data.videoId
        this.video.videoOriginalName = file.name;
      },
      //2. 视图上传多于一个视频
      handleUploadExceed() {
        this.$message.warning('想要重新上传视频，请先删除已上传的视频')
      },
      //3. 点击删除触发事件
      beforeVodRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`)
      },
      //4. 删除视频提交
      handleVodRemove(file, fileList) {
        console.log(file)
        vod.removeById(this.video.videoSourceId).then(response=>{
          //删除视频后重置id
          this.helpResetVideo()
          this.$message.success(response.message)
        })
      },
      //=====================小节操作=====================

      //1. 点击小节编辑
      editVideo(videoId) {
        this.dialogVideoFormVisible = true
        video.getVideoInfoById(videoId).then(response => {
          this.video = response.data.item
          //TODO 新增回显视频
          this.fileList =[]
          const videoName= this.video.videoOriginalName
          if(videoName)this.fileList = [{'name': videoName}]

        })
        //console.log(this.video)

      },
      //2. 点击确定
      saveOrUpdateVideo() {
        if (!this.video.id) {
          this.saveVideo()
        } else {
          this.updateDataVideo()
        }
      },
      //3. 保存
      saveVideo() {
        this.video.courseId = this.courseId
        this.video.chapterId = this.chapterId
        video.saveVideoInfo(this.video).then(result => {
          //提示
          this.$message({
            type: 'success',
            message: '添加成功'
          })
          this.helpSaveVideo()
        })
      },
      //4. 更新
      updateDataVideo() {
        video.updateVideoInfoById(this.video).then(response => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.helpSaveVideo()
        })
      },
      //5. 编辑后操作 重置数据
      helpSaveVideo() {
        this.dialogVideoFormVisible = false// 如果保存成功则关闭对话框
        this.fetchChapterNestedListByCourseId()// 刷新列表
        this.video.title = ''// 重置章节标题
        this.video.sort = 0// 重置章节标题
        this.saveVideoBtnDisabled = false
      },
      //6. 删除
      removeVideo(videoId) {
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return video.removeById(videoId)
        }).then(() => {
          this.helpResetVideo()
          this.fetchChapterNestedListByCourseId()// 刷新列表
          console.log("video",this.video)
          console.log("fileList",this.fileList)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch((response) => { // 失败
          if (response === 'cancel') {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          }
        })
      },
      //7. 删除后重置数据
      helpResetVideo(){
        this.video.videoOriginalName=''
        this.video.videoSourceId=''
        this.video.isFree=''
        this.video.title=''
        this.fileList=[]
        console.log("helpResetVideo")
      },
      //=====================章节操作=====================
      //1. 上一步
      previous() {
        console.log('previous')
        this.$router.push({ path: `/course/info/${this.courseId}` })
      },
      //2. 下一步
      next() {
        console.log('next')
        this.$router.push({ path: `/course/publish/${this.courseId}` })
      },
      //3. 初始化
      init() {
        if (this.$route.params && this.$route.params.id) {
          this.courseId = this.$route.params.id
          // 根据id获取课程基本信息
          this.fetchChapterNestedListByCourseId()
        }
      },
      //4. 获取嵌套章节列表
      fetchChapterNestedListByCourseId() {
        chapter.getNestedTreeList(this.courseId).then(result => {
          this.chapterNestedList = result.data.items
        })
      },
      //5. 打开[章节]新增或修改弹框
      openChapterDialog(chapterId) {
        this.dialogChapterFormVisible = true
        //新增
        if (!chapterId) {
          this.chapter.title = ''// 重置章节标题
          this.chapter.sort = 0// 重置章节标题
          return false
        }
        this.chapterTitle = '修改章节'
        chapter.getById(chapterId).then(result => {
          this.chapter = result.data.item//点击编辑后 会将id赋值给chapter对象
        })
      },
      //6.提交添加或更新章节
      saveOrUpdate() {
        //如果有章节id 新增
        if (this.chapter.id) {
          this.updateChapter()
        } else {
          this.saveChapter()
        }
      },
      //7. 新增
      saveChapter() {
        this.chapter.courseId = this.courseId
        chapter.save(this.chapter).then(result => {
          //提示
          this.$message({
            type: 'success',
            message: '添加成功'
          })
          this.helpSave()
        })
      },
      //8. 更新
      updateChapter() {
        this.chapter.courseId = this.courseId
        chapter.updateById(this.chapter).then(result => {
          console.log(this.chapter)
          //提示
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          //重置章节id 防止编辑后再添加 会修改上一个章节
          this.chapter.id = ''
          this.helpSave()
        })
      },
      //9. 保存后的操作
      helpSave() {
        this.dialogChapterFormVisible = false// 如果保存成功则关闭对话框
        this.fetchChapterNestedListByCourseId()// 刷新列表
        this.chapter.title = ''// 重置章节标题
        this.chapter.sort = 0// 重置章节标题
        this.saveBtnDisabled = false
      },
      //10. 删除章节
      removeChapter(chapterId) {
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return chapter.removeById(chapterId)
        }).then(() => {
          this.fetchChapterNestedListByCourseId()// 刷新列表
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch((response) => { // 失败
          if (response === 'cancel') {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          } else {
            this.$message({
              type: 'error',
              message: '删除失败'
            })
          }
        })

      }
    }
  }
</script>

<style scoped>
  .chapterList {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .chapterList li {
    position: relative;
  }

  .chapterActs {
    position: absolute;
    right: 50px;
  }

  .videoActs {
    position: absolute;
    right: 50px;
  }

  /*.chapterActs button{
    color: #606266;
  }*/
  .chapterActs i {
    color: #a4a4a4;
    margin-left: 5px;
  }

  .videoList {
    padding-left: 50px;
  }

  .videoList p {
    float: left;
    font-size: 14px;
    margin: 10px 0;
    padding: 10px;
    height: 50px;
    line-height: 30px;
    width: 100%;
    border: 1px dotted #E4E7ED;
  }
</style>
